<!DOCTYPE html>
<html>

<head>
  <title>canvas sample-01</title>
  <style type="text/css">
  * {
    margin: 0;
    padding: 0
  }
  
  pre {
    padding: 10px 0
  }
  </style>
</head>

<body>
  <pre></pre>
  <p></p>
  <div id="stage" style="border: 1px solid #ccc; margin: 20px; width: 640px; height: 480px;"></div>
  <script src="../sketch.js/Sketch.js"></script>
  <script src="../sketch.js/util.js"></script>
  <script src="../sketch.js/declare.js"></script>
  <script src="../sketch.js/core.js"></script>
  <script src="../sketch.js/object.js"></script>
  <script type="text/javascript">
  var stage = document.getElementById('stage');
  var layer = Sketch.Layer(stage);
  var painter = layer.painter;
  for (var i = 0; i < 3000; ++i) {
    var point = Sketch.Point(Sketch.random(-320, 320), Sketch.random(-240, 240));
    painter.addChild(point);
  }
  var dir = 1;
  var tick = setInterval(function() {
    layer.zoom += dir;
    if (layer.zoom > 200) {
      dir = -1;
    } else if (layer.zoom < 50) {
      dir = 1;
    }
    console.time('x')
    painter.redraw();
    console.timeEnd('x')
  }, 30);
  </script>
</body>

</html>
